<template>
  <div
    class="modify"
    :style="{ height: clientHeight + 'px' }"
    ref="homePage"
  >
    <!-- <toast
      v-model="showPositionValue"
      type="text"
      :time="800"
      is-show-mask
      :text="toastText"
      :position="position"
    ></toast> -->
    <tab
      :line-width="2"
      :custom-bar-width="getBarWidth"
    >
      <tab-item
        @on-item-click="teacher(1)"
        :selected="active === 1"
      >我的学员{{a_count}}</tab-item>
      <tab-item
        @on-item-click="teacher(2)"
        :selected="active === 2"
      >
        我的老师{{b_count}}</tab-item>

    </tab>
    <!-- 教师推广人教师推广人教师推广人 -->
    <!-- v-if="listArr.length>0"  -->
    <div
      ref="slide"
      :style="`height:${WinHeight}px;width:${WinWidth}px`"
      class="slides"
    >
      <div
        class="slide-group"
        ref="slideGroup"
        :style="`width:${2 * 100}%`"
      >
        <div
          class="item"
          v-for="(items,indexs) in twoArr"
          :key="indexs"
          :style="`height:${WinHeight}px;width:${WinWidth}px`"
        >
          <section
            style="width:100%; overflow: hidden; height:100%"
            ref="wrapper"
          >

            <div class="scrl">
              <!-- v-if="active === 1" -->
              <div
                v-for="(item,index) in items"
                :key='index'
              >
                <section
                  class="content"
                  v-if="indexs === 0"
                  v-show="item.cover && items.length>0"
                >
                  <div class="content-l">
                    <img
                      v-if="item.cover"
                      :src="item.cover ? item.cover : 'http://o6wndwjxn.qnssl.com/411c0201903281025158162.png' "
                    />
                    <img
                      v-if="item.img"
                      :src="item.img"
                    />
                  </div>
                  <div class="content-c">
                    <div
                      class="content-c-n"
                      v-if="item.nick_name"
                    >{{item.nick_name}}</div>
                    <div
                      class="content-c-n"
                      v-if="item.name"
                    >{{item.name}}</div>
                    <div
                      class="content-c-d"
                      v-if="item.create_at"
                    >{{item.create_at}}</div>
                    <div
                      class="content-c-d"
                      v-if="item.create_time"
                    >{{item.create_time}}</div>
                  </div>
                </section>
                <section
                  class="teacher-content"
                  v-if="indexs === 1"
                  v-show="items.length > 0 && item.create_time"
                >
                  <div class="teacher-avatar">
                    <img :src="item.img ?  item.img : 'http://o6wndwjxn.qnssl.com/411c0201903281025158162.png'">
                  </div>
                  <div
                    class="teacher-content-cs"
                    v-if="item.name"
                  >
                    <div><span class="text-teacher">教师昵称：</span>{{item.name}}</div>
                    <div><span class="text-teacher">微信昵称：</span>{{item.d_name}}</div>
                    <div
                      class="content-c-d"
                      v-if="item.create_time"
                    >{{item.create_time}}</div>
                  </div>
                </section>
              </div>
            </div>
            <!-- <load-more
                :show-loading="loadStatus"
                :tip="loadStatusText"
                v-if="listArr.length>5"
              ></load-more> -->
          </section>
          <div v-if='listArr1.length < 0 && indexs === 1'>
            <kong
              :type='co_kong'
              img='https://o6wndwjxn.qnssl.com/WechatIMG3.png'
            ></kong>
          </div>
          <div v-if='listArr.length < 0 && indexs === 0'>
            <kong
              :type='co_kong'
              img='https://o6wndwjxn.qnssl.com/WechatIMG3.png'
            ></kong>
          </div>
        </div>
      </div>
    </div>
    <div>
      <!-- <div
        class="big-box"
        ref="wrapper"
      >
        <div>
        </div>
      </div> -->
    </div>
    <!-- <div
      class="none"
      v-if="listArr.length<=0"
    >
      <div>
        <no-assessment text='暂无'></no-assessment>
      </div>
    </div> -->
  </div>
</template>

<script>
import kong from '@/components/public/kong.vue'
import BScroll from 'better-scroll'
import noAssessment from '@/components/public/noassessment'
import {
  userTeon,
  teoncount
} from '@/api/home'
import {
  Tab,
  TabItem,
  LoadMore
} from 'vux'
import {
  mapState
} from 'vuex'
export default {
  watch: {
    osos (v) {
      this.active = this.slide.getCurrentPage().pageX + 1
      this.page = 1
      this.$nextTick(() => {
        this.initWrapper(this.active)
      })
    }
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  components: {
    kong,
    LoadMore,
    Tab,
    TabItem,
    noAssessment
  },
  data () {
    return {
      a_count: '',
      b_count: '',
      co_kong: '任何数据',
      twoArr: [],
      osos: 0,
      active: 1,
      WinHeight: '',
      WinWidth: '',
      type: 1,
      page: 1,
      loadStatus: false,
      loadStatusText: '加载中',
      listArr: [],
      listArr1: [],
      showPositionValue: false, // 是否显示提示
      loading: true,
      clientHeight: '',
      change: true,
      imgData: {
        accept: 'image/gif, image/jpeg, image/png, image/jpg,image/svg'
      },
      bendiimgurl: '',
      getBarWidth: function (index) {
        return 30 + 'px'
      }
    }
  },
  created () {
    this.getlist(1)
    this.getcount()
  },
  mounted () {
    this.$nextTick(() => {
      this.WinHeight = document.documentElement.clientHeight - 44
      this.WinWidth = document.documentElement.clientWidth
      this.initTab()
    })
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    window.onresize = function temp () {
      this.clientHeight = `${document.documentElement.clientHeight}`
    }
  },
  methods: {
    getcount () {
      console.log(31312)
      let data = {
        member_id: this.user_id,
        type: 1
      }
      teoncount(data).then(res => {
        if (res.data.code === 200) {
          let { a_count, b_count } = res.data.data
          this.a_count = a_count
          this.b_count = b_count
        }
      })
    },
    initTab () {
      let _this = this
      this.slide = new BScroll(this.$refs.slide, {
        scrollX: true,
        scrollY: false,
        momentum: false,
        pullUpLoad: {
          threshold: 0
        },
        snap: {
          loop: false,
          threshold: 0,
          speed: 300
        },
        bounce: false,
        stopPropagation: true,
        click: this.click
      })
      this.slide.on('scrollEnd', function (ob) {
        _this.osos = ob.x
      })
    },
    getlist (type) {
      console.log(type)
      let obj = {
        member_id: this.user_id,
        type: type || 1,
        page: this.page,
        pageshow: 30
      }
      userTeon(obj).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        if (res.data.code === 200) {
          if (this.page === 1) {
            if (type === 1) {
              this.listArr = res.data.data
              this.twoArr.push(this.listArr)
              this.getlist(2)
            } else {
              this.listArr1 = res.data.data
              this.twoArr.push(this.listArr1)
            }
          } else {
            if (type === 1) {
              // this.listArr = this.listArr.concat(res.data.data)
              this.listArr = this.twoArr[0].concat(res.data.data)
              this.$set(this.twoArr, 0, this.listArr)
            } else {
              this.listArr1 = this.twoArr[0].concat(res.data.data)
              this.$set(this.twoArr, 0, this.listArr1)
            }
          }
          if (this.listArr.length > 0 && this.page === 1) {
            console.log(this.listArr.length)
            console.log(this.page)
            this.initWrapper(this.active)
          }
        } else {
          this.loadStatus = false
          this.loadStatusText = '我是有底线的'
        }
      })
    },
    teacher (type) {
      if (type) {
        if (this.obc !== type) {
          this.slide.goToPage(type - 1)
          // this.obc = type
          // this.$store.commit('updateLoadingStatus', { isLoading: true })
          // this.listArr = []
          // this.page = 1
          // this.getlist(type)
        }
      }
    },
    initWrapper (active) {
      this.$nextTick(() => {
        let _this = this
        if (this.$refs.wrapper[active - 1] !== undefined) {
          this.scroll = new BScroll(this.$refs.wrapper[active - 1], {
            click: true,
            scrollY: true,
            scrollX: false,
            tap: true,
            bounce: false,
            probeType: 3,
            pullUpLoad: {
              threshold: 10
            }
          })
          this.scroll.on('pullingUp', function () {
            _this.loadStatus = true
            _this.loadStatusText = '加载中'
            _this.page = _this.page + 1
            _this.getlist(_this.active)
            _this.scroll.finishPullUp()
            _this.scroll.refresh()
          })
        }
      })
      // 上拉加载
    },
    changeFixed (clientHeight) { // 动态修改样式
      // console.log(clientHeight)
      this.$refs.homePage.style.height = clientHeight + 'px'
    }
  }
}
</script>

<style lang="less" scoped>
.slides {
  width: 100%;
  overflow: hidden;
}
.slide-group {
  display: flex;
}
.teacher-content {
  width: 100%;
  height: calc(100vw * 215 / 750);
  background-color: #fff;
  padding-top: calc(100vw * 20 / 750);
  padding-left: calc(100vw * 50 / 750);
  padding-right: calc(100vw * 50 / 750);
  box-sizing: border-box;
  display: flex;
}
.teacher-content-cs > div {
  width: 100%;
  margin-bottom: 10px;
}
.teacher-avatar {
  width: calc(100vw * 100 / 750);
  height: calc(100vw * 100 / 750);
  border-radius: 50%;
  background-color: #fcc;
}
.teacher-content-cs {
  height: 100%;
  flex: 1;
  margin-left: calc(100vw * 40 / 750);
}
.text-teacher {
  color: #999;
}
.none {
  position: fixed;
  top: 5%;
  left: 0;
  bottom: 0;
  right: 0;
  div {
    width: 100%;
    height: 60%;
    margin-top: 30%;
  }
}
.modify {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: 14px;
  color: #1a1a1a;
  width: 100%;
  overflow: hidden;
}
.big-box {
  position: fixed;
  top: 44px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.button-tab-border-radius {
  border-radius: 0;
}

.content {
  width: 100%;
  height: 50px;
  margin: 10px auto 10px auto;
  background: #ffffff;
  border-radius: 5px;
  display: flex;
  box-sizing: border-box;
  padding-left: 15px;
}

.content-l img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.content-c-n {
  width: 130px;
  // white-space: nowrap;
  flex: 1;
  font-size: 14px;
  color: #000000;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.content-c {
  margin-left: 10px;
}
.content-c-d {
  font-size: 12px;
  color: #999999;
  line-height: 30px;
}

.content-r {
  font-size: 10px;
  color: #999999;
  line-height: 24px;
}
</style>
